<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { ref, onMounted } from 'vue'
import { checkLogin, userState } from './store.js'

// 搜索关键词
const searchKeyword = ref('')

// 主分类 - 显示在导航栏中
const mainCategories = [
  { id: 'pets', name: '宠物', description: '关于宠物的一切问题', example: '猫咪饲养技巧、狗狗训练方法' },
  { id: 'beauty', name: '美妆', description: '美妆产品推荐与使用技巧', example: '化妆品选购指南、护肤步骤分享' },
  { id: 'knowledge', name: '知识', description: '各类知识分享与讨论', example: '历史文化、科学科普知识' },
  { id: 'health', name: '健康医疗', description: '健康知识与医疗咨询', example: '健身方法、营养饮食搭配' }
]

// 更多分类 - 默认隐藏，通过更多按钮展开
const moreCategories = [
  { id: 'electronics', name: '电子产品', description: '数码设备使用与推荐', example: '手机电脑测评、智能家居使用' },
  { id: 'education', name: '教育', description: '学习方法与教育资源', example: '学习技巧、考试备考攻略' },
  { id: 'finance', name: '金融理财', description: '理财知识与投资建议', example: '基金股票入门、省钱技巧' },
  { id: 'travel', name: '旅游', description: '旅行攻略与目的地推荐', example: '热门景点、自由行攻略' }
]

// 组合所有分类用于路由等操作
const forumCategories = [...mainCategories, ...moreCategories]

// 可见分类（默认显示主分类）
const visibleCategories = ref(mainCategories)

// 控制更多分类的显示状态
const showMoreCategories = ref(false)

// 切换更多分类的显示状态
const toggleMoreCategories = () => {
  showMoreCategories.value = !showMoreCategories.value
}

// 搜索功能
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    // 搜索逻辑
    console.log('搜索:', searchKeyword.value)
  }
}

// 检查登录状态
onMounted(() => {
  checkLogin()
})
</script>

<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <header class="forum-header">
      <div class="top-nav">
        <div class="logo-container">
          <RouterLink to="/home" class="logo">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
              <rect width="40" height="40" rx="8" fill="#e67e22"/>
              <text x="20" y="26" text-anchor="middle" fill="white" font-size="18" font-weight="bold">问答论坛</text>
            </svg>
          </RouterLink>
        </div>
        
        <!-- 会员中心按钮 -->
        <RouterLink to="/membership/center" class="profile-btn" v-if="userState.isLoggedIn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="#ffd700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          会员中心
        </RouterLink>
        
        <!-- 个人主页按钮 -->
        <RouterLink to="/profile" class="profile-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="12" cy="7" r="4" stroke="white" stroke-width="2"/>
          </svg>
          个人主页
        </RouterLink>
        
        <!-- 搜索框 -->
        <div class="search-bar">
          <div class="search-input-wrapper" @click="$refs.searchInput.focus()">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="search-icon">
              <circle cx="7" cy="7" r="6" stroke="#666" stroke-width="1.5"/>
              <path d="M12 12L15 15" stroke="#666" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
            <input 
              ref="searchInput"
              v-model="searchKeyword" 
              type="text" 
              placeholder="搜索问题或答案"
              class="search-input"
              @keypress.enter="handleSearch"
            />
          </div>
        </div>
        
        <!-- 发帖按钮 -->
        <div class="post-btn-container">
          <RouterLink to="/new-post" class="post-btn">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M12 5v14M5 12h14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            发布问题
          </RouterLink>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 左侧分类导航 -->
        <aside class="category-sidebar">
          <div class="category-header">
            <h2>论坛分类</h2>
            <button 
              class="more-categories-btn"
              @click="toggleMoreCategories"
            >
              {{ showMoreCategories ? '收起' : '更多' }}
              <svg 
                width="16" 
                height="16" 
                viewBox="0 0 24 24" 
                fill="none" 
                :class="{ 'rotate-180': showMoreCategories }"
              >
                <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
          <nav class="category-nav">
            <RouterLink 
              v-for="category in visibleCategories" 
              :key="category.id"
              :to="{ name: 'category', params: { categoryId: category.id } }"
              class="category-link"
              active-class="active"
            >
              <div class="category-info">
                <h3>{{ category.name }}</h3>
                <p class="category-description">{{ category.description }}</p>
                <p class="category-example">示例：{{ category.example }}</p>
              </div>
            </RouterLink>
            
            <!-- 更多分类展开内容 -->
            <transition name="expand">
              <div v-if="showMoreCategories" class="more-categories-section">
                <RouterLink 
                  v-for="category in moreCategories" 
                  :key="category.id"
                  :to="{ name: 'category', params: { categoryId: category.id } }"
                  class="category-link more-category-item"
                  active-class="active"
                >
                  <div class="category-info">
                    <h3>{{ category.name }}</h3>
                    <p class="category-description">{{ category.description }}</p>
                    <p class="category-example">示例：{{ category.example }}</p>
                  </div>
                </RouterLink>
              </div>
            </transition>
          </nav>
        </aside>
      
      <!-- 右侧内容区域 -->
      <div class="content-area">
        <RouterView />
      </div>
    </main>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff9e6; /* 淡黄色背景 */
}

/* 顶部导航栏 */
.forum-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #e67e22;
  border-bottom: 1px solid #d35400;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 20px;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* 搜索框 */
.search-bar {
  flex: 1;
  max-width: 600px;
  margin: 0 40px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: text;
}

.search-icon {
  margin-right: 8px;
  color: #666;
}

.search-input {
  flex: 1;
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 14px;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

/* 发帖按钮 */
.post-btn-container {
  display: flex;
  align-items: center;
}

.post-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s;
}

.post-btn:hover {
  background-color: #27ae60;
}

/* 个人主页按钮 */
.profile-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s;
  margin-right: 15px;
}

.profile-btn:hover {
  background-color: #2980b9;
}

/* 主内容区 */
.main-content {
  flex: 1;
  display: flex;
  padding-top: 80px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* 左侧分类导航 */
.category-sidebar {
  width: 25%;
  background-color: white;
  border-right: 1px solid #e0e0e0;
  height: calc(100vh - 80px);
  position: fixed;
  top: 80px;
  left: 0;
  overflow-y: auto;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.category-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.more-categories-btn {
  background: none;
  border: none;
  color: #ff8c00;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.more-categories-btn:hover {
  background-color: #fff9e6;
}

.more-categories-btn svg {
  transition: transform 0.3s ease;
}

.more-categories-btn svg.rotate-180 {
  transform: rotate(180deg);
}

.category-nav {
  padding: 10px 0;
}

.category-link {
  display: block;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
  border-bottom: 1px solid #f5f5f5;
}

.category-link:hover {
  background-color: #f8f9fa;
  padding-left: 25px;
}

.category-link.active {
  background-color: #ffeaa7;
  border-left: 4px solid #e67e22;
}

.category-info h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: 600;
}

.category-description {
  margin: 0 0 5px 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.category-example {
  margin: 0;
  font-size: 12px;
  color: #999;
  font-style: italic;
}

/* 更多分类样式 */
.more-categories-section {
  background-color: #fff9e6;
  border-radius: 8px;
  overflow: hidden;
}

.more-category-item {
  font-size: 14px;
}

/* 展开动画 */
.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
  max-height: 500px;
  opacity: 1;
}

.expand-enter-from,
.expand-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* 右侧内容区域 */
.content-area {
  width: 75%;
  margin-left: 25%;
  padding: 20px;
}

/* 确保响应式设计适合电脑端 */
@media (min-width: 1024px) {
  .category-sidebar {
    width: 25%;
  }
  
  .content-area {
    width: 75%;
    margin-left: 25%;
  }
  
  /* 更多分类按钮在桌面端显示 */
  .more-categories-btn {
    display: flex;
  }
}
</style>
